<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>

<body>
    <form action="" class="layui-form" lay-filter="newsForm">

        <input id="news_id" name="news_id" type="hidden">
        <div class="layui-form layuimini-form">
            <div class="layui-form-item">
                <label class="layui-form-label required">新闻标题</label>
                <div class="layui-input-block">
                    <input type="text" id="news_title" name="news_title" lay-verify="required" lay-reqtext="标题不能为空"
                        placeholder="请输入标题" value="" class="layui-input" readonly>
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">配图</label>
                <div class="layui-input-block">
                    <div class="layui-upload">
                        <input type="hidden" name="news_picture" id="news_picture" readonly>
                        <div class="layui-upload-list">
                            <img style="width: 600px;" class="layui-upload-img" id="demo1">
                            <p id="demoText"></p>
                        </div>
                    </div>
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">新闻内容</label>
                <div class="layui-input-block">
                    <textarea id="news_content" name="news_content" class="layui-textarea" rows="30" readonly ></textarea>
                </div>
            </div>

            <!-- <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">新闻内容</label>
                <div class="layui-input-block">
                    <textarea class="layui-textarea" name="news_content" id="lay_content" style="display: none"
                        placeholder="请输入新闻具体内容" readonly>
                    </textarea>
                </div>
            </div> -->


            <div class="layui-inline layui-form-item">
                <label class="layui-form-label">发布时间</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input textarea" name="news_createtime" id="news_createtime"
                        placeholder="yyyy-MM-dd HH:mm:ss" readonly>
                </div>
            </div>


            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">评论区:</label>
                <div class="layui-input-block">
                    <div class="layui-collapse" id="comments">
                        <!-- <div class="layui-colla-item">
                            <h2 class="layui-colla-title">杜甫</h2>
                            <div class="layui-colla-content layui-show" >内容区域</div>
                        </div> -->
                    </div>
                </div>
            </div>



            <div class="layui-inline layui-form-item">
                <label class="layui-form-label">给本条新闻评分</label>
                <div class="layui-input-inline">
                    <div id="test1"></div>
                </div>
            </div>


        </div>
    </form>



    <script src="../../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script>
        layui.use(['form', 'upload', 'element', 'rate', 'layedit'], function () {
            var form = layui.form,
                layer = layui.layer,
                upload = layui.upload,
                element = layui.element,
                rate = layui.rate,
                layedit = layui.layedit,
                $ = layui.$;


            //构建一个默认的编辑器
            var index = layedit.build('lay_content');

            //渲染评分打星
            var ins1 = rate.render({
                elem: '#test1'  //绑定元素
            });


            //从localStorage中取出数据
            var newsStr = localStorage.getItem("news");
            var newsObj = JSON.parse(newsStr);
            // alert(newsObj.news_title)
            //对表单 进行赋值 
            form.val("newsForm", {
                news_id: newsObj.news_id,
                news_title: newsObj.news_title,
                news_picture: newsObj.news_picture,
                news_content: newsObj.news_content,
                news_createtime: newsObj.news_createtime
            })
            $("#demo1").attr("src", newsObj.news_picture)
            // $("#comments").html('<div>'+'<h1>'+'测'+'试'+'</h1>'+'</div>')
            // $("#comments").prepend(' <div class="layui-colla-item"><h2 class="layui-colla-title">张飞</h2><div class="layui-colla-content layui-show" id="comments_content">测试</div></div>');
            // $("#tttt").before(' <div class="layui-colla-item"><h2 class="layui-colla-title">张飞</h2><div class="layui-colla-content layui-show" id="comments_content">测试</div></div>');
            $.ajax({
                url: "http://localhost:8080/admin/news/comments/list",
                type: "post",
                data: { "news_id": newsObj.news_id },
                success: (result) => {
                    // alert(result.data[0].user_name);
                    if (result.count > 0) {
                        for (var i = 0; i < result.count; i++) {
                            $("#comments").prepend(' <div class="layui-colla-item"><h2 class="layui-colla-title">' + result.data[i].user_name + '评论了:</h2><div class="layui-colla-content layui-show">' + result.data[i].comments_content + '</div></div>')
                        }
                    } else {
                        $("#comments").html("<h2>暂无评论</h2>");
                    }
                }
            })

        });
    </script>
</body>

</html>